import QtQuick 2.12
import Product 1.0

Item {
    id: root
    visible: true
    width: imgBg.width
    height: imgBg.height

    property int index: 1
    property var _POINTSA: [
        Qt.point(154, 256),
        Qt.point(154, 328), //
        Qt.point(406, 328),
        Qt.point(406, 263)
    ]
    property var _POINTSB: [
        Qt.point(79, 256),
        Qt.point(79, 363), //
        Qt.point(589, 363),
        Qt.point(589, 263)
    ]
    property var lenA1: _POINTSA[1].y - _POINTSA[0].y
    property var lenA2: _POINTSA[2].x - _POINTSA[1].x
    property var lenA3: _POINTSA[2].y - _POINTSA[3].y

    property var lenA: lenA1 + lenA2 + lenA3
    property var currentA: 0

    property var lenB1: _POINTSB[1].y - _POINTSB[0].y
    property var lenB2: _POINTSB[2].x - _POINTSB[1].x
    property var lenB3: _POINTSB[2].y - _POINTSB[3].y

    property var lenB: lenB1 + lenB2 + lenB3
    property var currentB: 0


    Image {
        id: imgBg
        source: "qrc:/images/bg.PNG"
    }

    Rectangle{
        x: 45; y: 232
        width: 146; height: 25
        opacity: 0.3
        color: "red"
        visible: false

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                handle()
            }
        }
    }

    Timer{
        id: timer
        repeat: true
        interval: 20
        onTriggered: {
            paint()
        }
    }

    Timer{
        id: timerEvent
        running: true
//        repeat: true
        interval: 10
        onTriggered: {
            handle()
        }
    }

    function handle()
    {
        if(index==0){
            index=1
        }
        else if(index==1){
            index=0
        }
        timer.restart()
        mouseArea.enabled=false
    }

    function createProduct(type)
    {
        var product = Factory.createProduct(type)
//        console.log(product.icon)

        listModel.insert(listModel.count, {"icon": product.icon})
    }

    function paint()
    {
        if(index==0) {
            if(currentA>=lenA)
            {
                currentA = 0
                timer.stop()
                mouseArea.enabled=true
                createProduct("boy")
                timerEvent.restart()
            }
            else
                currentA+=10
        }
        else if(index==1) {
            if(currentB>=lenB)
            {
                currentB = 0
                timer.stop()
                mouseArea.enabled=true
                createProduct("girl")
                timerEvent.restart()
            }
            else
                currentB+=10
        }
        canvas.requestPaint()
    }

    Canvas{
        id: canvas
        width: root.width
        height: root.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0,0,canvas.width, canvas.height)
            ctx.fillStyle = Qt.rgba(0,0,0,0)
            ctx.strokeStyle = Qt.rgba(1,0,0,1)
            ctx.lineWidth = 1

            ctx.beginPath()
            //a
            if(currentA > 0 ){
                ctx.moveTo(_POINTSA[0].x, _POINTSA[0].y)
                if(currentA<=lenA1)
                {
                    ctx.lineTo(_POINTSA[0].x, _POINTSA[0].y + currentA)
                }
                else if(currentA<=lenA1+lenA2)
                {
                    ctx.lineTo(_POINTSA[1].x, _POINTSA[1].y)
                    ctx.lineTo(_POINTSA[1].x + currentA-lenA1, _POINTSA[2].y)
                }
                else{
                    ctx.lineTo(_POINTSA[1].x, _POINTSA[1].y)
                    ctx.lineTo(_POINTSA[2].x, _POINTSA[2].y)
                    ctx.lineTo(_POINTSA[3].x, _POINTSA[2].y - (currentA-(lenA1 + lenA2)))
                }
            }

            //b
            if(currentB > 0 ){
                ctx.moveTo(_POINTSB[0].x, _POINTSB[0].y)
                if(currentB<=lenB1)
                {
                    ctx.lineTo(_POINTSB[0].x, _POINTSB[0].y + currentB)
                }
                else if(currentB<=lenB1+lenB2)
                {
                    ctx.lineTo(_POINTSB[1].x, _POINTSB[1].y)
                    ctx.lineTo(_POINTSB[1].x + currentB-lenB1, _POINTSB[2].y)
                }
                else{
                    ctx.lineTo(_POINTSB[1].x, _POINTSB[1].y)
                    ctx.lineTo(_POINTSB[2].x, _POINTSB[2].y)
                    ctx.lineTo(_POINTSB[3].x, _POINTSB[2].y - (currentB-(lenB1 + lenB2)))
                }
            }
//            ctx.closePath()
            ctx.fill()
            ctx.stroke()
        }
    }

    ListView{
        id: listview1
        x: 5; y: 404
        width: root.width - 10
        height: 40
        clip: true
        spacing: 5
        model: ListModel{
            id: listModel
        }
        delegate: Component{
            Image {
                source: icon
                width: 40
                height: 40
            }
        }
        orientation: ListView.Horizontal
        add: Transition {
            NumberAnimation{ property: "x"; from: listview1.x + listModel.count*40 + (listModel.count-1)*listview1.spacing + 10; duration: 300; }
        }
    }
}
